<template>
  <!-- 三维画布 -->
  <div ref="draw" />
</template>

<script>
import * as THREE from 'three';
import {OBJLoader} from 'three/examples/jsm/loaders/OBJLoader.js';

export default {
  mounted() {
    // 创建场景
    const scene = new THREE.Scene();

    // 创建相机
    const camera = new THREE.PerspectiveCamera(
      75, 
      window.innerWidth / window.innerHeight, 
      0.1, 
      1000
    );
    camera.position.z = 5;

    // 创建渲染器
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    this.$refs.draw.appendChild(renderer.domElement);

    // 加载OBJ文件
    const loader = new OBJLoader();
    loader.load('/Male.OBJ', (object) => {
      scene.add(object);
    });

    // 添加灯光
    const light = new THREE.PointLight(0xffffff, 1, 100);
    light.position.set(50, 50, 50);
    scene.add(light);

    // 更新渲染器
    function animate() {
      requestAnimationFrame(animate);
      renderer.render(scene, camera);
    }
    animate();
  }
}
</script>
